<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${postUser.post.postTitle}+'-浮生若梦'"></title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link href="http://cdn.bootcss.com/highlight.js/9.8.0/styles/github-gist.min.css" rel="stylesheet" type="text/css">
    <link href="css/pageCss.css" rel="stylesheet" type="text/css">
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        position: absolute;

        left: 0px;
        top: 0px;
        background-image: url("img/timg.png");
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /*.panel img {
        max-width: 100% !important;
        height: auto !important;
    }*/

    .panel {
        margin-top: 20px;
    }

    .unOpacity {
        opacity: 1
    }

    .changeColor:hover {
        color: #5cb85c;
    }

    .setColor {
        color: #4cae4c;
    }
</style>
<body ondragstart="return false">
<div th:replace="part/nav :: nav"></div>
<div id="top" class="container" style="margin-top: 4%;">
    <div class="col-md-8">
        <div class="bg unOpacity" style="border-radius: 15px;">
            <div class="panel panel-default">
                <div class="panel-heading">标题</div>
                <div class="panel-body" th:text="${postUser.post.postTitle}">
                </div>
                <div class="panel-heading">描述</div>
                <div class="panel-body" id="detail" th:text="${postUser.post.postDetail}">
                </div>
                <div class="panel-heading">内容</div>
                <div class="panel-body" id="content" th:utext="${postUser.post.postContent}">
                </div>
                <div class="panel-heading">标签</div>
                <div class="panel-body" id="label">
                    <label class="label label-info" th:each="label:${postUser.post.labels}" th:text="${label.label}"
                           style="margin-left: 1%"></label>
                </div>
                <!--点赞评论收藏按钮-->
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div align="right">
                        <span class="changeColor;"
                              th:if="${session.user!=null &&postUser.post.userId.equals(session.user.userId)}">
                            <label th:onclick="'skip(\'/deletePost.htm?id='+${postUser.post.postId}+'\')'"
                                   class="glyphicon glyphicon-triangle-bottom sm-btn"></label><label
                                class="sm-btn" style="margin-right:5%;"
                                th:onclick="'skip(\'/deletePost.htm?id='+${postUser.post.postId}+'\')'">&nbsp;删除</label>
                        </span>
                        <span id="collection" class="changeColor;"
                              th:classappend="${isCollection==true?'setColor':''}">
                            <label class="glyphicon glyphicon-triangle-bottom sm-btn"
                                   th:onclick="'collection('+${postUser.post.postId}+','+${session.user==null}+')'"></label><label
                                class="sm-btn" style="margin-right:5%;"
                                th:onclick="'collection('+${postUser.post.postId}+','+${session.user==null}+')'">&nbsp;收藏</label>
                        </span>
                        <span id="like" class="changeColor;" th:classappend="${isLike==true?'setColor':''}">
                            <label class="glyphicon glyphicon-triangle-bottom sm-btn"
                                   th:onclick="'like('+${postUser.post.postId}+','+${session.user==null}+')'"></label><label
                                class="sm-btn"
                                th:onclick="'like('+${postUser.post.postId}+','+${session.user==null}+')'">&nbsp;点赞</label>
                        </span>
                    </div>
                </div>
                <!--评论-->
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div class="formStyle" th:if="${session.user!=null}">
                        <form id="commentForm" action="/sendComment.htm" method="post">
                            <div class="form-group">
                                <input id="postId" name="postId" th:value="${postUser.post.postId}" hidden="hidden"/>
                                <span class="input-group-addon"
                                      style="text-align: left;background-color:#8c8c8c;color: white;">评论:</span>
                                <textarea id="comment" name="comment" class="form-control"
                                          style="resize: none;"></textarea>
                                <div align="right" style="padding-top: 2%">
                                    <button class="btn btn-sm btn-info">发表</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <hr>
                    <div th:each="commentAndComment:${commentAndComments}">
                        <div>
                            <!--一层评论-->
                            <div class="col-md-1">
                                <div width="50px" height="50px">
                                    <img style="object-fit: cover;width:50px;height: 50px;border-radius: 50%"
                                         class="hand"
                                         th:onclick="'commentUserSpaceSkip(\'/browseUser.htm?id='+${commentAndComment.firstUserComment.user.userId}+'\')'"
                                         th:src="${commentAndComment.firstUserComment.user.userImage}">
                                </div>
                            </div>
                            <div class="col-md-11" style="padding-top: 5px">
                                <div class="hand"
                                     th:onclick="'commentUserSpaceSkip(\'/browseUser.htm?id='+${commentAndComment.firstUserComment.user.userId}+'\')'">
                                    <span th:text="${commentAndComment.firstUserComment.user.userName}"
                                          class="label label-success"></span>
                                </div>
                                <input id="commentId" name="commentId"
                                       th:value="${commentAndComment.firstUserComment.user.userId}" hidden="hidden"/>
                                <div>
                                    <div class="panel-body" style="word-wrap: break-word;"
                                         th:text="${commentAndComment.firstUserComment.comment.commentContent}"></div>
                                </div>
                                <div>
                                    <div align="left" class="two" style="width: 40%">
                                        <div th:text="${commentAndComment.firstUserComment.comment.commentTime}"></div>
                                    </div>
                                    <div align="right" class="two" style="width: 60%">
                                        <span id="reply" class="changeColor;">
                                            <label class="glyphicon glyphicon-triangle-bottom sm-btn"
                                                   th:onclick="replyComment([[${commentAndComment.firstUserComment.comment.commentId}]],[[${commentAndComment.firstUserComment.user.userName}]])"></label>
                                            <label
                                                    class="sm-btn" style="margin-right:5%;"
                                                    th:onclick="replyComment([[${commentAndComment.firstUserComment.comment.commentId}]],[[${commentAndComment.firstUserComment.user.userName}]])">回复</label>
                                        </span>
                                        <span th:id="'commentLike'+${commentAndComment.firstUserComment.comment.commentId}"
                                              class="changeColor;"
                                              th:classappend="${commentAndComment.firstUserComment.comment.commentIsLike==true?'setColor':''}">
                                            <label class="glyphicon glyphicon-triangle-bottom sm-btn"
                                                   th:onclick="'commentLike('+${session.user==null}+','+${commentAndComment.firstUserComment.comment.postId}+','+${commentAndComment.firstUserComment.comment.commentId}+','+${commentAndComment.firstUserComment.comment.commentLike}+')'">
                                            </label>
                                            <label class="sm-btn"
                                                   th:onclick="'commentLike('+${session.user==null}+','+${commentAndComment.firstUserComment.comment.postId}+','+${commentAndComment.firstUserComment.comment.commentId}+','+${commentAndComment.firstUserComment.comment.commentLike}+')'">&nbsp;点赞</label>
                                            <label th:id="'commentLikeCount'+${commentAndComment.firstUserComment.comment.commentId}"
                                                   th:text="${commentAndComment.firstUserComment.comment.commentLike}"></label>
                                        </span>
                                    </div>
                                </div>
                                <!--二层评论-->
                                <div th:each="secondComment:${commentAndComment.secondUserComments}">
                                    <div class="col-md-1">
                                        <div width="30px" height="30px">
                                            <img style="object-fit: cover;width:30px;height: 30px;border-radius: 50%"
                                                 class="hand"
                                                 th:onclick="'commentUserSpaceSkip(\'/browseUser.htm?id='+${secondComment.user.userId}+'\')'"
                                                 th:src="${secondComment.user.userImage}">
                                        </div>
                                    </div>
                                    <div class="col-md-11" style="padding-top: 5px">
                                        <div class="hand"
                                             th:onclick="'commentUserSpaceSkip(\'/browseUser.htm?id='+${secondComment.user.userId}+'\')'">
                                            <span th:text="${secondComment.user.userName}"
                                                  class="label label-success"></span>
                                        </div>
                                        <div>
                                            <div class="panel-body" style="word-wrap: break-word;"
                                                 th:text="${secondComment.comment.commentContent}"></div>
                                        </div>
                                        <div>
                                            <div align="left" class="two" style="width: 40%">
                                                <div th:text="${secondComment.comment.commentTime}"></div>
                                            </div>
                                            <div align="right" class="two" style="width: 60%">
                                                <span th:id="'commentLike'+${secondComment.comment.commentId}"
                                                      class="changeColor;"
                                                      th:classappend="${secondComment.comment.commentIsLike==true?'setColor':''}">
                                            <label class="glyphicon glyphicon-triangle-bottom sm-btn"
                                                   th:onclick="'commentLike('+${session.user==null}+','+${secondComment.comment.postId}+','+${secondComment.comment.commentId}+','+${secondComment.comment.commentLike}+')'">
                                            </label>
                                            <label class="sm-btn"
                                                   th:onclick="'commentLike('+${session.user==null}+','+${secondComment.comment.postId}+','+${secondComment.comment.commentId}+','+${secondComment.comment.commentLike}+')'">&nbsp;点赞</label>
                                            <label th:id="'commentLikeCount'+${secondComment.comment.commentId}"
                                                   th:text="${secondComment.comment.commentLike}"></label>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <!--<div calss="divider"></div>-->
                                    <h6 style="color: #8c8c8c">------------------------------------------------------------</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div style="position: fixed;width: 25%">
            <div class="bg" style="border-radius: 15px; word-wrap: break-word;">
                <div align="center" th:if="${postUser==null}"><h3>错误</h3></div>
                <div th:if="${postUser!=null}">
                    <div th:replace="part/follow :: follow"></div>
                    <table width="100%" style="table-layout:fixed;margin-left: 3%;">
                        <!--${session.user.userImage}-->
                        <tr>
                            <td rowspan="4"><img th:src="${postUser.user.userImage}" width="100px" height="100px"
                                                 style="object-fit: cover;"/></td>
                            <td style="width: 80%" align="center" th:text="'uid：'+${postUser.user.userId}">uid：*</td>
                        </tr>
                        <tr>
                            <td style=" overflow:hidden;white-space:nowramp;text-overflow:ellipsis;" align="center"
                                th:text="${postUser.user.userName}">一生所爱
                            </td>
                        </tr>
                        <tr>
                            <td align="center"
                                th:text="${postUser.user.userGender==1?'♂':(postUser.user.userGender==0?'♀':'未知')}">男
                            </td>
                        </tr>
                        <tr>
                            <td align="center" th:text="${postUser.user.userBirthday}">2000-1-1</td>
                        </tr>
                        <!--<tr>-->
                        <!--    <td colspan="2" style="padding-top: 3%;" th:text="${postUser.user.userDetail}"><p>-->
                        <!--        这个人很懒，什么都没写。</p></td>-->
                        <!--</tr>-->
                    </table>
                    <div class="panel panel-default">
                        <div class="panel-heading">个人留言：</div>
                        <div class="panel-body" th:text="${postUser.user.userDetail}"></div>
                    </div>
                </div>
            </div>
            <div class="bg" style="border-radius:15px;word-wrap: break-word;">
                <div align="center"><h3>工具</h3></div>
                <div align="center">
                    <a class="btn btn-info" id="toTop">回顶部</a>
                    <a class="btn btn-info"
                       th:onclick="'userSpaceSkip('+${postUser.user.userId}+','+${session.user==null}+')'">访问作者空间</a>
                    <a class="btn btn-info" id="back">返回</a>
                </div>
            </div>
        </div>
    </div>
    <!--快速登录-->
    <div th:replace="part/fastLogin :: fastLogin"></div>
</div>
<script src=" js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/highlight.js/9.8.0/highlight.min.js"></script>
<script src="js/follow.js"></script>
<script>
    $(document).ready(function () {
        $("#content").each(function (i, block) {
            //该段代码，就是使用jQuery时，初始化该highlight的方法。
            hljs.highlightBlock(block);
        });
        //获取当前页面路径
        $("#recentUrl").val(window.location.href);
    });

    //当点击跳转链接后，回到页面顶部位置
    $("#toTop").click(function () {
        if ($('html').scrollTop()) {
            $('html').animate({scrollTop: 0}, 100);//动画效果
            return false;
        }
        $('body').animate({scrollTop: 0}, 100);
        return false;
    });

    $("#back").click(function () {
        window.history.back()
    });

    //点赞和取消点赞
    function like(id, user) {
        //未登录的话提示登录
        if (user) {
            $("#login").modal("show");
        } else {
            $.ajax({
                cache: false,
                async: true,
                type: 'post',
                url: "/postLike.htm",
                data: {"id": id},
                success: function (res) {
                    if (res == "true") {
                        $("#like").addClass("setColor");
                    } else if (res == "false") {
                        $("#like").removeClass("setColor");
                    } else {
                        $("#login").modal("show");
                    }
                }
            });
        }
    }

    //收藏和取消收藏
    function collection(id, user) {
        if (user) {
            $("#login").modal("show");
        } else {
            $.ajax({
                cache: false,
                async: true,
                type: 'post',
                url: "/postCollection.htm",
                data: {"id": id},
                success: function (res) {
                    if (res) {
                        $("#collection").addClass("setColor");

                    } else {
                        $("#collection").removeClass("setColor");
                    }
                }
            });
        }
    }

    //评论点赞和取消点赞
    function commentLike(isLogin, postId, commentId) {
        //未登录的话提示登录
        if (isLogin) {
            $("#login").modal("show");
        } else {
            var commentLikeId = "#commentLike" + commentId;
            var commentLikeCountId = "#commentLikeCount" + commentId;
            $.ajax({
                cache: false,
                async: true,
                type: 'post',
                url: "/commentLike.htm",
                data: {"postId": postId, "commentId": commentId},
                success: function (res) {
                    var split = res.split(',');
                    if (split[0] == "true") {
                        $(commentLikeId).addClass("setColor");
                        $(commentLikeCountId).text(split[1]);
                    } else if (split[0] == "false") {
                        $(commentLikeId).removeClass("setColor");
                        $(commentLikeCountId).text(split[1]);
                    } else {
                        $("#login").modal("show");
                    }
                }
            });
        }
    }

    //评论一层评论
    function replyComment(commentId, commentName) {
        var value = commentId + "@" + commentName + "=&=>:";
        document.getElementById("comment").value = value;
        document.getElementById("comment").focus();
        document.querySelector("#comment").scrollIntoView({
            behavior: "smooth",
            block: "center",
            inline: "nearest"
        });
        // window.location.href="#comment";
    }

    //通过userID跳转
    function userSpaceSkip(id) {
        window.location.href = "/browseUser.htm?id=" + id;
    }

    function skip(href) {
        if (confirm("你确定要删除这篇内容吗？")) {
            window.location.href = href;
        }
    }

    function commentUserSpaceSkip(href) {
        window.location.href = href;
    }
</script>
</body>
</html>